<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>6-async函数基本用法</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <style></style>
  </head>
  <body>
    <div id="app"></div>
    <script>
      axios.defaults.baseURL = 'http://www.localhost:3000/';

      // 1:直接请求和接口，
      // axios.get('/addData').then(function (res) {
      //   console.log(res.data);
      // });

      // 2：用async和await，处理异步操作
      // async function getData() {
      //   var res = await axios.get('/addData');
      //   console.log(res); //bject { data: "Hello axios", status: 200, statusText: "OK", headers: {…},
      //   console.log(res.data); //Hello axios
      //   return res.data;
      // }
      // getData().then(function (data) {
      //   console.log(data); //Hello axios
      // });

      // 3：async和await重构promise
      async function getInfo() {
        var info = await new Promise(function (resolve, reject) {
          setTimeout(function () {
            resolve('geuInfo -ok');
          }, 1000);
        });
        console.log(info); //转换前：Promise { <state>: "pending" }是一个promise对象， 转换后：geuInfo -ok
        return info;
      }

      getInfo().then(function (data) {
        // console.log(data); /geuInfo -ok
      });
    </script>
  </body>
</html>
